<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<script type="text/javascript">
$(function(){
	var fileKind = "";
	
	// 장르 설정 정보 가져오기
	var tempGenre = ${initParam.genre};
	var arrGenre = tempGenre.split(',');
	// 장르 초기화
	for(i=0; i<arrGenre.length; i++){
		$(":input[name=genre]").append("<option>"+arrGenre[i]+"</option>");
	}
	$(":input[name=genre]").val("${mbvo.genre}").attr("selected", "selected");
	
	$("#writeForm").submit(function(){
		
		if(!$(":input[name=title]").val()){
			alert("제목을 입력하세요");
			return false;
		}
		
		if(!$(":input[name=genre]").val()){
			alert("장르를 선택하세요");
			return false;
		}
	});
	/* 음악파일변경 */
	$("#musicfileform").on("click","#musicChangeBtn",function(){
		$("#musicfileform").empty();
		$("#musicfileform").html("<input type='file' onchange='checkExtension(this)' name='uploadFile' accept='audio/mp3'>");
		$("#musicfilecancle").html("<button type=button id=musicCancleBtn class='btn btn-default'>취소</button>");
	});
	/* 음악파일변경 취소 */
	$("#musicfilecancle").on("click","#musicCancleBtn",function(){
		$("#musicfileform").empty();
		$("#musicfileform").html('${mbvo.orgFile } <input type=button id=musicChangeBtn value=파일변경>');
		$("#musicfilecancle").empty();
	});		
	
	/* 사진변경 */
	$("#albumartfrom").on("click","#imgChangeBtn",function(){
		$("#albumartfrom").empty();
		$("#albumartfrom").html("<input type=file name=uploadPictureFile accept=image/*>");
		$("#albumartcancle").html("<button type='button' id='imgCancleBtn' class='btn btn-default'>취소</button>");
	});
	
	/* 사진변경 취소 */
	$("#albumartcancle").on("click","#imgCancleBtn",function(){
		$("#albumartfrom").empty();
		$("#albumartfrom").html('${mbvo.pictureFile } <input type=button id=imgChangeBtn value=사진변경>');
		$("#albumartcancle").html("<button type='button' id='imgdeleteBtn' class='btn btn-default'>삭제</button>");
	});
	
	/* 사진삭제 */
	$("#albumartcancle").on("click","#imgdeleteBtn",function(){
		$(":input[name=pictureFile]").val($(":input[name=pictureFile]").val()+".del");
		$("#albumartfrom").empty();
		$("#albumartfrom").html("<input type=file name=uploadPictureFile accept=image/*>");
		$("#albumartcancle").html("<br><br><br>");
	});
	
	$("#updateCancelBtn").click(function(){
		if(confirm("작성취소하시겠습니까?")){
		location.href=${initParam.root}+"musicboard_pagingContent.ju?nowPage=1";
		}
	});
	
});//ready

function checkExtension(fileObj){
	var filePath = fileObj.value;
	var fileName = filePath.substring(filePath.lastIndexOf("\\")+1);
	fileKind = fileName.split(".")[1];
	
	if(fileKind != "mp3"){
		alert("mp3 파일만 등록가능합니다.")
		$("#inputFile").val("");
	}
}
</script>
<%-- ${mbvo } --%>
<div class="well">
	<form method="post" action="musicboard_updateContent.ju" id="writeForm" class="form-horizontal" enctype="multipart/form-data">
	  <fieldset>
	    <legend>음악게시판 수정</legend>
	    
	    <div class="form-group">
	      <label for="inputTitle" class="col-lg-2 control-label">제목</label>
	      <div class="col-lg-10">
	        <input type="text" class="form-control" id="inputTitle" placeholder="Title" name="title" value="${mbvo.title }">
	      </div>
	    </div>
	    
	    <div class="form-group">
	      <label for="select" class="col-lg-2 control-label">장르</label>
	      <div class="col-lg-10">
	        <select class="form-control" id="select" name="genre" >
	        </select>
	        <span class="text-primary">음악과 어울리는 장르를 선택해주세요.</span>
	      </div>
	    </div>
	    
	    <div class="form-group">
		  <label class="col-lg-2 control-label">음악파일</label>
		  <div class="col-lg-10">
		  <span id="musicfileform" class=form-control style="width: 90%; float:left;">${mbvo.orgFile } <input type="button" id="musicChangeBtn" value="파일변경"></span>
		  <span id="musicfilecancle"></span>
		    <div class="alert alert-dismissable alert-warning" style="clear: both;">
			  <h4>Warning!</h4>
			  <p>mp3 파일만 업로드 가능합니다.</p>
			</div>
		  </div>
		</div>
		
		<div class="form-group">
			<label class="col-lg-2 control-label">이미지파일</label>
			<div class="col-lg-10">
				<span id="albumartfrom" class=form-control style="width: 90%; float:left;">${mbvo.pictureFile } <input type="button" id="imgChangeBtn" value="사진변경"></span>
				<span id="albumartcancle"><button type='button' id='imgdeleteBtn' class='btn btn-default'>삭제</button></span>
				<div>
					<p class="text-primary">음악을 대표하는 사진을 올려주세요.</p>
				</div>
			</div>
		</div>
	
	    <div class="form-group">
	      <label for="textArea" class="col-lg-2 control-label">내용</label>
	      <div class="col-lg-10">
	        <textarea class="form-control" rows="5" id="textArea" name="content">${mbvo.content }</textarea>
	      </div>
	    </div>
	    
	    <div class="form-group">
	      <div class="col-lg-10 col-lg-offset-2">
	        <button type="button" class="btn btn-default" id="updateCancelBtn">취소</button>
	        <button type="submit" class="btn btn-primary">수정</button>
	      </div>
	    </div>
	    
	  </fieldset>
	  
	  <input type="hidden" name="no" value="${mbvo.no}">
	  <input type="hidden" name="newFile" value="${mbvo.newFile}">
	  <input type="hidden" name="orgFile" value="${mbvo.orgFile}">
	  <input type="hidden" name="pictureFile" value="${mbvo.pictureFile}">
	</form>
</div>